<template>
	<view class="page-container">
		<view class="card">
			<text class="card-title">车辆基本信息</text>
			<view class="image-upload-section">
				<view class="form-label">
					<text class="label">车辆图片</text>
					<text class="required">*</text>
				</view>
				<view class="image-grid">
					<view style="position: relative;" class="image-placeholder"
						v-for="(image, index) in formData.images" :key="index">
						<image :src="image" mode="aspectFill" class="upload-image" />
						<view class="image-delete" @click="deleteImage(index)">
							<text class="iconfont icon-delete"></text>
						</view>
					</view>
					<view v-if="formData.images.length==0" style="border: 2px dashed #d1d5db;" class="image-placeholder"
						@click="uploadImage">
						<view style="display: flex;flex-direction: column;color: #9ca3af;align-items: center;">
							<text class="iconfont icon-xiangji" style="font-size: 32px;"></text>
							<text class="image-text">添加图片</text>
						</view>
					</view>
					<view v-else style="border: 2px dashed #d1d5db;" class="image-placeholder" @click="uploadImage">
						<svg xmlns="http://www.w3.org/2000/svg" class="icon-plus" viewBox="0 0 24 24" fill="none"
							stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<line x1="12" y1="5" x2="12" y2="19"></line>
							<line x1="5" y1="12" x2="19" y2="12"></line>
						</svg>
					</view>
				</view>
			</view>
			<view class="form-group-list">
				<view class="form-group">
					<view class="form-label">
						<text class="label">标题</text>
						<text class="required">*</text>
					</view>
					<input v-model="formData.title" type="text" placeholder="请输入采购名称" class="input-field" />
				</view>
				<view class="form-group">
					<view class="form-label">
						<text class="label">VIN码</text>
						<text class="required">*</text>
					</view>
					<input v-model="formData.vin" type="text" placeholder="请输入VIN码" class="input-field" />
				</view>
				<view class="form-row">
					<view class="form-group">
						<view class="form-label">
							<text class="label">品牌</text>
							<text class="required">*</text>
						</view>
						<picker @change="bindPickerChange('brand', $event)" :value="brandIndex" :range="brands">
							<view class="picker-field">
								<text :class="{'placeholder': !formData.brand}">{{ formData.brand || '选择品牌' }}</text>
								<text class="arrow-icon">&#9660;</text>
							</view>
						</picker>
					</view>
					<view class="form-group">
						<view class="form-label">
							<text class="label">型号</text>
						</view>
						<input v-model="formData.model" type="text" placeholder="如：X5" class="input-field" />
					</view>
				</view>
				<view class="form-row">
					<view class="form-group">
						<view class="form-label">
							<text class="label">年份</text>
						</view>
						<picker @change="bindPickerChange('year', $event)" :value="yearIndex" :range="years">
							<view class="picker-field">
								<text :class="{'placeholder': !formData.year}">{{ formData.year || '选择年份' }}</text>
								<text class="arrow-icon">&#9660;</text>
							</view>
						</picker>
					</view>
					<view class="form-group">
						<view class="form-label">
							<text class="label">颜色</text>
						</view>
						<input v-model="formData.color" type="text" placeholder="如：珍珠白" class="input-field" />
					</view>
				</view>
				<view class="form-group">
					<view class="form-label">
						<text class="label">里程数 (km)</text>
						<text class="required">*</text>
					</view>
					<input v-model="formData.mileage" type="number" placeholder="请输入里程数" class="input-field" />
				</view>
				<view class="form-group">
					<view class="form-label">
						<text class="label">检测报告</text>
						<text class="required">*</text>
					</view>
					<input v-model="formData.report" type="number" placeholder="请输入里程数" class="input-field" />
				</view>
			</view>
		</view>
		<view class="card">
			<text class="card-title">采购信息</text>
			<view class="form-group-list">
				<view class="form-group">
					<view class="form-label">
						<text class="label">采购价格 (元) </text>
						<text class="required">*</text>
					</view>
					<input v-model="formData.purchasePrice" type="number" placeholder="请输入采购价格" class="input-field" />
				</view>
				<!-- 车辆所在地 input -->
				<view class="form-group">
					<view class="form-label">
						<text class="label">车辆所在地</text>
					</view>
					<input v-model="formData.carLocation" type="text" placeholder="请输入详细地址" class="input-field" />
				</view>
			</view>
		</view>
		<!-- 目标信息 card -->
		<view class="card">
			<text class="card-title">目标信息</text>
			<view class="form-group-list">
				<view class="form-group">
					<view class="form-label">
						<text class="label">目标服务站</text>
					</view>
					<picker @change="bindPickerChange('targetPort', $event)" :value="targetPortIndex"
						:range="targetPorts">
						<view class="picker-field">
							<text
								:class="{'placeholder': !formData.targetPort}">{{ formData.targetPort || '选择港口' }}</text>
							<text class="arrow-icon">&#9660;</text>
						</view>
					</picker>
				</view>
				<!-- 目标港口 picker -->
				<view class="form-group">
					<view class="form-label">
						<text class="label">目标港口</text>
					</view>
					<picker @change="bindPickerChange('targetPort', $event)" :value="targetPortIndex"
						:range="targetPorts">
						<view class="picker-field">
							<text
								:class="{'placeholder': !formData.targetPort}">{{ formData.targetPort || '选择港口' }}</text>
							<text class="arrow-icon">&#9660;</text>
						</view>
					</picker>
				</view>
				<!-- 目标国家 input -->
				<view class="form-group">
					<view class="form-label">
						<text class="label">目标客户</text>
					</view>
					<input v-model="formData.targetCountry" type="text" placeholder="如：俄罗斯、哈萨克斯坦" class="input-field" />
				</view>
				<view class="form-group">
					<view class="form-label">
						<text class="label">预计完成时间</text>
					</view>
					<picker mode="date" @change="bindPickerChange('expectedCompletionDate', $event)">
						<view class="picker-field">
							<text
								:class="{'placeholder': !formData.expectedCompletionDate}">{{ formData.expectedCompletionDate || '选择日期' }}</text>
							<text class="arrow-icon">&#9660;</text>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="card">
			<text class="card-title">负责人信息</text>
			<view class="form-group-list">
				<view class="form-group">
					<view class="form-label">
						<text class="label">采购负责人</text>
					</view>
					<picker disabled @change="bindPickerChange('purchasingManager', $event)"
						:value="purchasingManagerIndex" :range="purchasingManagers">
						<view class="picker-field">
							<text
								:class="{'placeholder': !formData.purchasingManager}">{{ formData.purchasingManager || '选择负责人' }}</text>
							<text class="arrow-icon">&#9660;</text>
						</view>
					</picker>
				</view>
				<!-- 业务跟进人 picker -->
				<view class="form-group">
					<view class="form-label">
						<text class="label">业务跟进人</text>
					</view>
					<picker @change="bindPickerChange('businessFollower', $event)" :value="businessFollowerIndex"
						:range="businessFollowers">
						<view class="picker-field">
							<text
								:class="{'placeholder': !formData.businessFollower}">{{ formData.businessFollower || '选择跟进人' }}</text>
							<text class="arrow-icon">&#9660;</text>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<!-- 其他费用 card -->
		<view class="card">
			<view class="card-header">
				<text class="card-title">其他费用</text>
				<button @click="addOtherCost" class="add-cost-button">
					<text class="add-icon">+</text>
					<text>添加费用</text>
				</button>
			</view>
			<view class="cost-content" style="display: flex;flex-direction: row;">
				<view class="form-group">
					<view class="form-label">
						<text class="label">费用名称</text>
						<text class="required">*</text>
					</view>
					<input v-model="cost.name" type="text" placeholder="如：保险费、维修费等" class="input-field" />
				</view>
				<view class="form-group">
					<view class="form-label">
						<text class="label">费用金额 (元)</text>
						<text class="required">*</text>
					</view>
					<input v-model="cost.amount" type="number" placeholder="请输入费用金额" class="input-field" />
				</view>
			</view>

			<view v-if="otherCosts.length === 0" class="empty-cost">
				<text class="empty-text">暂无其他费用</text>
			</view>
			<view v-else class="cost-list">
				<view v-for="(cost, index) in otherCosts" :key="index" class="cost-item">
					<text class="label">{{cost.name}}</text>
					<text class="required">{{cost.amount}}¥</text>
					<text class="iconfont icon-delete" style="font-size: 12px;" @click="removeOtherCost(index)"></text>
				</view>
			</view>
			<view v-if="otherCosts.length > 0" class="cost-summary">
				<text class="summary-text">其他费用总计：¥{{ totalOtherCosts }}</text>
			</view>
		</view>
		<!-- 备注信息 card -->
		<view class="card">
			<text class="card-title">备注信息</text>
			<textarea v-model="formData.remarks" placeholder="请输入项目备注信息（选填）" class="textarea-field"
				auto-height></textarea>
		</view>
	</view>
	<!-- 底部操作按钮 -->
	<view class="fixed-bottom">
		<view class="button-group">
			<button @click="saveDraft" class="button draft-button">
				保存草稿
			</button>
			<button @click="createProject" class="button primary-button">
				创建项目
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed
	} from 'vue';

	const formData = reactive({
		title: '',
		vin: '',
		brand: '',
		model: '',
		year: '',
		color: '',
		mileage: '',
		report: '',
		purchasePrice: '',
		ownerName: '',
		ownerPhone: '',
		carLocation: '',
		deposit: '',
		targetPort: '',
		targetCountry: '',
		expectedCompletionDate: '',
		purchasingManager: '',
		businessFollower: '',
		remarks: '',
		images: [],
		otherCosts: []
	});



	// Define data for pickers
	const brands = ref(['BMW', '奔驰', '奥迪', '保时捷', '丰田', '本田']);
	const years = ref(['2024', '2023', '2022', '2021', '2020', '2019']);
	const targetPorts = ref(['上海', '广州', '天津', '宁波', '青岛']);
	const purchasingManagers = ref(['张经理', '李采购', '王业务']);
	const businessFollowers = ref(['李主管', '陈业务', '刘专员']);

	const brandIndex = ref(0);
	const yearIndex = ref(0);
	const targetPortIndex = ref(0);
	const purchasingManagerIndex = ref(0);
	const businessFollowerIndex = ref(0);

	const bindPickerChange = (field, e) => {
		const index = e.detail.value;
		switch (field) {
			case 'brand':
				formData.brand = brands.value[index];
				brandIndex.value = index;
				break;
			case 'year':
				formData.year = years.value[index];
				yearIndex.value = index;
				break;
			case 'targetPort':
				formData.targetPort = targetPorts.value[index];
				targetPortIndex.value = index;
				break;
			case 'purchasingManager':
				formData.purchasingManager = purchasingManagers.value[index];
				purchasingManagerIndex.value = index;
				break;
			case 'businessFollower':
				formData.businessFollower = businessFollowers.value[index];
				businessFollowerIndex.value = index;
				break;
			case 'expectedCompletionDate':
				formData.expectedCompletionDate = e.detail.value;
				break;
		}
	};


	const uploadImage = () => {
		// #ifdef MP-WEIXIN
		uni.chooseMedia({
			count: 9 - formData.images.length,
			mediaType: ['image'],
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				const paths = res.tempFiles.map(file => file.tempFilePath);
				formData.images.push(...paths);
			}
		})
		// #endif
		// #ifdef H5
		uni.chooseImage({
			count: 9 - formData.images.length,
			mediaType: ['image'],
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				console.log(res);
				formData.images.push(...res.tempFilePaths)
			}
		})
		// #endif
	}

	/* 1. 当前正在编辑的费用对象 */
	const cost = reactive({
		name: '',
		amount: null
	})

	/* 2. 所有已添加的费用数组 */
	const otherCosts = reactive([])

	/* 3. 点击“添加费用”按钮的回调 */
	function addOtherCost() {
		// 简单校验
		if (!cost.name) {
			uni.showToast({
				title: '请输入费用名称',
				icon: 'none'
			})
			return
		}
		if (cost.amount == null || cost.amount === '' || cost.amount < 0) {
			uni.showToast({
				title: '请输入正确的金额',
				icon: 'none'
			})
			return
		}

		// 将当前费用对象添加到数组
		otherCosts.push({
			name: cost.name,
			amount: cost.amount
		})

		// 重置输入框
		cost.name = ''
		cost.amount = null
	}

	// 删除照片
	const deleteImage = (index) => {
		formData.images.splice(index, 1)
	}

	const removeOtherCost = (index) => {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这项费用吗？',
			confirmText: '删除',
			confirmColor: '#ef4444',
			success: (res) => {
				if (res.confirm) {
					otherCosts.splice(index, 1);
					uni.showToast({
						title: '已删除',
						icon: 'success',
						duration: 1500
					});
				}
			}
		});
	};

	// 计算其他费用总计
	const totalOtherCosts = computed(() => {
		return otherCosts.reduce((total, cost) => {
			const amount = parseFloat(cost.amount) || 0;
			return total + amount;
		}, 0).toFixed(2);
	});
	const saveDraft = () => {
		console.log('保存草稿:', formData);

		uni.showToast({
			title: '草稿已保存',
			icon: 'success'
		});
	};

	const createProject = () => {
		console.log('创建项目:', formData);
		uni.showToast({
			title: '项目创建成功',
			icon: 'success'
		});
	};
</script>

<style scoped>
	/* 全局样式和变量 */
	.page-container {
		padding: 16px;
		background-color: #f9fafb;
		min-height: 100vh;
		padding-bottom: 100px;
	}

	/* Card 样式 */
	.card {
		background-color: #ffffff;
		border-radius: 16px;
		padding: 40rpx;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
		margin-bottom: 24px;
	}

	.card-title {
		font-size: 18px;
		font-weight: 600;
		color: #1f2937;
		margin-bottom: 16px;
		display: block;
	}

	.form-label {
		margin-bottom: 15rpx;
		font-size: 14px;
		color: #333;
	}

	.required {
		color: #ff4757;
		margin-left: 5rpx;
	}

	.form-group-list>.form-group {
		margin-bottom: 16px;
	}

	.form-group-list>.form-group:last-child {
		margin-bottom: 0;
	}

	.form-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 80rpx;
		margin-bottom: 16px;
	}

	.form-row .form-group {
		flex: 1;
		margin-bottom: 0;
	}

	.input-field,
	.picker-field,
	.textarea-field {
		padding: 12px 16px;
		border: 1px solid #d1d5db;
		border-radius: 12px;
		font-size: 14px;
		color: #374151;
	}

	.input-field:focus,
	.picker-field:focus,
	.textarea-field:focus {
		border-color: #667eea;
		box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
		outline: none;
	}

	.picker-field {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.placeholder {
		color: #9ca3af;
	}

	.arrow-icon {
		font-size: 12px;
		color: #9ca3af;
	}

	.textarea-field {
		width: inherit;
		resize: none;
	}

	/* 底部按钮样式 */
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: #ffffff;
		border-top: 1px solid #e5e7eb;
		padding: 16px 24px;
	}

	.button-group {
		display: flex;
		flex-direction: row;
		gap: 12px;
	}

	.button {
		flex: 1;
		padding: 12rpx 0;
		border-radius: 12px;
		font-weight: 500;
		font-size: 16px;
		text-align: center;
		color: #fff;
	}

	.draft-button {
		background-color: #e5e7eb;
		color: #4b5563;
	}

	.button::after {
		border: none;
	}

	.primary-button {
		background-color: #3B82F6;
		color: #fff;
	}

	.bottom-spacer {
		height: 80rpx;
	}

	/* 图片上传样式 */
	.image-upload-section {
		margin-bottom: 24px;
	}

	.image-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}

	.image-placeholder {
		aspect-ratio: 1 / 1;
		background-color: #f3f4f6;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-plus {
		color: #9ca3af;
		height: 24px;
		width: 24px;
	}

	.image-text {
		font-size: 12px;
		color: #6b7280;
	}


	.upload-image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.image-delete {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: #ff4757;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* .image-delete .iconfont { */
	.image-delete .iconfont {
		color: #fff;
		font-size: 20rpx;
	}

	/* 其他费用样式 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}


	.add-cost-button {
		display: flex;
		align-items: center;
		gap: 4px;
		padding:20rpx 24rpx;
		background-color: #3B82F6;
		color: white;
		border: none;
		border-radius: 20rpx;
		font-size: 14px;
		font-weight: 500;
		line-height: normal;
		transition: all 0.2s ease;
		box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
	}

	.add-cost-button:hover {
		background-color: #2563eb;
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
	}

	.add-cost-button:active {
		transform: translateY(0);
		box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
	}

	.add-cost-button::after {
		border: none;
	}

	.remove-cost-button {
		width: 32rpx;
		height: 32rpx;
		background-color: #ef4444;
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		transition: all 0.2s ease;
	}

	.remove-cost-button::after {
		border: none;
	}

	.cost-item {
		display: flex;
		align-items: center;
		gap: 12rpx;
		background-color: #f9fafb;
		border-radius: 12px;
		/* border: 1px solid #000; */
		transition: all 0.2s ease;
		animation: slideIn 0.3s ease-out;
	}

	.cost-item:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		border-color: #d1d5db;
	}

	@keyframes slideIn {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.add-icon {
		font-size: 16px;
		font-weight: bold;
	}

	.empty-cost {
		text-align: center;
		padding: 40px 0;
		color: #9ca3af;
	}

	.empty-text {
		font-size: 14px;
	}

	.cost-list {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}



	.cost-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.cost-actions {
		display: flex;
		align-items: center;
	}


	.remove-icon {
		line-height: 1;
	}

	.cost-summary {
		margin-top: 16px;
		padding: 12px 16px;
		background-color: #f0f9ff;
		border: 1px solid #bae6fd;
		border-radius: 8px;
		text-align: right;
	}

	.summary-text {
		font-size: 16px;
		font-weight: 600;
		color: #0369a1;
	}
</style>